import React, {PureComponent} from 'react';
import {Icon, Modal, Button} from 'antd';
import PropTypes from 'prop-types';
import {injectIntl} from '../intl';
import './ShowImage.css';
import {FILES_API} from '../../constants';
const basePath = fetch.basePath || '';
class ShowImg extends PureComponent {
    // static getDerivedStateFromProps(nextProps, prevState) {
    //     //const {type} = nextProps;
    //     // 当传入的type发生变化的时候，更新state
    //     if(nextProps.firstIndex !== prevState.f)
    //         return {
    //             f: nextProps.firstIndex
    //         };
      
    //     // 否则，对于state不进行任何操作
    //     return null;
    // }
    state = {
        R: 0,
        S: 1,
        i: 0,
        SS: 1,
        data: this.props.data,
        showimgs: this.props.showimgs,
        x: 0,
        y: 0
    };
    componentWillUnmount() {
        this.setState({});
    }
    
   
  //向左预览
  leftshow = () => {
      if(this.props.f === 0) {
          this.imgstyle.setAttribute('src', `${basePath}${FILES_API.files}/${this.props.data[this.props.data.length - 1].fileId}`);
          this.setState({//f: this.props.data.length - 1,
              R: 0,
              S: 1,
              i: 0,
              SS: 1});
          this.props.updateIndex(this.props.data.length - 1);
      } else {
          this.imgstyle.setAttribute('src', `${basePath}${FILES_API.files}/${this.props.data[this.props.f - 1].fileId}`);
          this.setState({//f: this.state.f - 1,
              R: 0,
              S: 1,
              i: 0,
              SS: 1});
          this.props.updateIndex(this.props.f - 1);
      }
  };

  //向右预览
  rightshow = () => {
      if(this.props.f === this.props.data.length - 1) {
          this.imgstyle.setAttribute('src', `${basePath}${FILES_API.files}/${this.props.data[0].fileId}`);
          this.setState({//f: 0,
              R: 0,
              S: 1,
              i: 0,
              SS: 1});
          this.props.updateIndex(0);
      } else {
          this.imgstyle.setAttribute('src', `${basePath}${FILES_API.files}/${this.props.data[this.props.f + 1].fileId}`);
          this.setState({//f: state.f + 1,
              R: 0,
              S: 1,
              i: 0,
              SS: 1});
          this.props.updateIndex(this.props.f + 1);
      }
  };

  //顺时针旋转
  rotateright = () => {
      this.setState({R: this.state.R + 90});
      this.imgstyle.style.transform =
      `translate(0% ,0%) rotate(${
          this.state.R
      }deg) scale(${
          this.state.SS
      },${
          this.state.SS
      })`;
  };

  //逆时针旋转
  rotateleft = () => {
      this.setState({R: this.state.R - 90});
      this.imgstyle.style.transform =
      `translate(0% ,0%) rotate(${
          this.state.R
      }deg) scale(${
          this.state.SS
      },${
          this.state.SS
      })`;
  };

  //放大
  showbig = () => {
      if(this.state.i >= 0)
          this.setState({
              S: this.state.S + 1,
              i: this.state.i + 1,
              SS: 1 * ((this.state.S * 0.25) + 1)
          });
      else
          this.setState({
              S: this.state.S - 1,
              i: this.state.i + 1,
              SS: 1 / (this.state.S - 1)
          });

      this.imgstyle.style.transform =
      `translate(0% ,0%) rotate(${
          this.state.R
      }deg) scale(${
          this.state.SS
      },${
          this.state.SS
      })`;
  };

  //缩小
  showmin = () => {
      if(this.state.S > 1)
          this.setState({
              S: this.state.S - 1,
              i: this.state.i - 1,
              SS: 1 * (this.state.SS - 0.25)
          });
      
          
      this.imgstyle.style.transform =
      `translate(0% ,0%) rotate(${
          this.state.R
      }deg) scale(${
          this.state.SS
      },${
          this.state.SS
      })`;
      this.setState({
          x: 0,
          y: 0
      });
  };
  moveImg = ev => {
      const {x, y} = this.state;
      ev.preventDefault();
      const disx = ev.pageX - x;
      const disy = ev.pageY - y;
      document.onmousemove = ev => {
          let xAxis = 0,
              yAxis = 0;
          if(Number(ev.pageX - disx) > 0)
              xAxis = Number(ev.pageX - disx) > (this.state.S - 1) * 0.25 * 400 ? (this.state.S - 1) * 0.25 * 400 : ev.pageX - disx;
          else
              xAxis = Number(ev.pageX - disx) < -(this.state.S - 1) * 0.25 * 400 ? -(this.state.S - 1) * 0.25 * 400 : ev.pageX - disx;
          if(Number(ev.pageY - disy) > 0)
              yAxis = Number(ev.pageY - disy) > (this.state.S - 1) * 0.25 * 225 ? (this.state.S - 1) * 0.25 * 225 : ev.pageY - disy;
          else
              yAxis = Number(ev.pageY - disy) < -(this.state.S - 1) * 0.25 * 225 ? -(this.state.S - 1) * 0.25 * 225 : ev.pageY - disy;
          this.setState({
              x: xAxis,
              y: yAxis
          });
      };
      document.onmouseup = () => {
          document.onmousemove = null;
          document.onmousedown = null;
      };
  }
  //统一处理滚轮滚动事件
  wheel = event => {
      let delta = 0;
      event = window.event || event;
      if(event.wheelDelta) { //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
          delta = event.wheelDelta / 120;
          if(window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
      } else if(event.detail) //FF浏览器使用的是detail,其值为“正负3”
          delta = -event.detail / 3;
      if(delta < 0) //向下滚动
          this.showmin();
      else //向上滚动
          this.showbig();
  }
  cancelModel = () => {
      this.imgstyle.setAttribute('src', '');
      this.props.toggleshow();
  }
  render() {
      const {showimgs} = this.props;
      const {R, SS} = this.state;
      return (
          <Modal
              width={850}
              visible={showimgs}
              footer={null}
              onCancel={this.cancelModel}
              destroyOnClose>
              <div className="bigimg toggleshow">
                  <div style={{height: '100%'}}>
                      <img
                          onWheel={this.wheel}
                          onMouseDown={this.moveImg}
                          src={`${basePath}${FILES_API.files}/${this.props.previewImage}`}
                          className="imgstyle"
                          style={{
                              transform: `translate(0% ,0%) rotate(${R}deg) scale(${SS},${SS})`,
                              left: `${this.state.x}px`,
                              top: `${this.state.y}px`
                          }}
                          ref={grid => {
                              this.imgstyle = grid;
                          }}/>
                          
                      {
                          this.props.data.length > 1 ? (
                              <div>
                                  <Button className="left" shape="circle" icon="left" onClick={this.leftshow} size="large"></Button>
                                  <Button className="right" shape="circle" icon="right" onClick={this.rightshow} size="large"></Button>
                              </div>
                          ) : null
                      }
                      
                      <Button className="rotateleft" shape="circle" icon="undo" onClick={this.rotateleft} size="large"></Button>
                      <Button className="rotateright" shape="circle" icon="redo" onClick={this.rotateright} size="large"></Button>
                      <Button className="showbig" shape="circle" icon="zoom-in" onClick={this.showbig} size="large"></Button>
                      <Button className="showmin" shape="circle" icon="zoom-out" onClick={this.showmin} size="large" disabled={this.state.S <= 1}></Button>
                      <Button className="download" shape="circle" icon="download" href={`${FILES_API.files}/${this.props.previewImage}`} size="large"></Button>
                  </div>
              </div>
          </Modal>
      );
  }
}
ShowImg.defaultProps = {
    R: 0,
    S: 1,
    i: 0,
    SS: 1,
    //f: this.props.firstIndex
};
ShowImg.propTypes = {
    R: PropTypes.number,
    S: PropTypes.number,
    SS: PropTypes.number,
    data: PropTypes.array,
    f: PropTypes.number,
    firstIndex: PropTypes.number,
    i: PropTypes.number,
    previewImage: PropTypes.string,
    showimgs: PropTypes.bool,
    toggleshow: PropTypes.func,
    updateIndex: PropTypes.func,
};
import {connect} from 'react-redux';
import {updateIndex} from '../actions';

const mapStateToProps = (state, props) => ({
    f: state.getIn((['page', 'showImg', 'index'])),
});
const mapDispatchToProps = (dispatch, props) => ({
    updateIndex: data => dispatch(updateIndex(data)),
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(ShowImg));
